<template>
  <view>
    <block>
      <!-- 个人信息 -->
      <view class="homepage-back">
        <view class="doctor-int">
          <image :src="list.avatar" mode="aspectFill"></image>
          <view>
            <view class="doctor-int name-padd">
              <text class="do-name">{{ list.name }}</text>
              <text>{{ list.post }}</text>
            </view>
            <text>{{ list.hospital }}</text>
          </view>
        </view>
        <view class="good-at" style="font-size: 14px">{{ list.good_at }}</view>
      </view>
      <!-- 选择时间 -->
      <view class="homepage-back">
        <text class="res-Title">预约挂号</text>
        <view class="table">
          <view class="table-left">
            <text>日期</text>
            <text>上午</text>
            <text>下午</text>
          </view>
          <scroll-view scroll-x="true" class="scroll-view_H" enable-flex="true">
            <view class="TR">
              <view>
                <text class="table-day">{{ list.App_ment[0].day }}</text>
                <text>{{ list.App_ment[0].week }}</text>
              </view>
              <!-- 0:下午 -->
              <view :class="list.App_ment[0].time[0].nu_source!==0?'Have':'Disa'" @click="go(0)">
                {{list.App_ment[0].time[0].nu_source===0?'':'预约'}}
              </view>
              <!-- 1:下午 -->
              <view :class="list.App_ment[0].time[1].nu_source!==0?'Have':'Disa'" @click="go(1)">
                {{list.App_ment[0].time[1].nu_source===0?'':'预约'}}
              </view>
            </view>
          </scroll-view>
        </view>
        <loding :show="show" @qie="go" :cart="cart" :obj="obj" @timelist="timelist" :time="list.App_ment[0].time[obj.when].the_time" ></loding>
      </view>
    </block>
    <!-- 提示 -->
    <view class="prompt">
      <text>重要提示:</text>
      <text>
        1.本次预约就诊当天不可取消预约,如需取消,请在就诊前一天的24:00之前操作,累计取消或爽约三次可能会被列入医院黑名单,请按需预约
      </text>
      <text>2.预约挂号暂不支持医保支付,若本次挂号使用手机在线支付,就诊过程中的门诊检验检查,处方费用可能不支持医保支付
      </text>
    </view>
  </view>
</template>

<script>
import {doctorhome} from "../../utils/API/registation";
import loding from "../../components/loding/loding";
export default {
  components: {loding},
  data() {
    return {
      list: [],
      show:false,
      cart:{},
      obj:{
        week:"",
        the_time:"",
        when:"",
        _id:"",
        patient_id:''
      }
    };
  },
  async onLoad(o) {
    let {data} = await doctorhome(o.id)
    this.list = data[0]
    this.obj.week=this.list.App_ment[0].week;
    this.obj._id=this.list._id;
    console.log(data[0])
  },
  onShow() {
    this.cart = this.store.state.obj
    this.obj.patient_id = this.store.state.obj._id
  },
  methods:{
    go(when){
      this.show=!this.show
      this.obj.when=when
    },
    timelist(item){
      this.obj.the_time=item
    }
  }
}
</script>

<style lang="scss">
page {
  background: linear-gradient(to bottom, #e8f4ff 30%, #f2f7fb 55%, #f0f5f9 90%);
}

.homepage-back {
  background-color: #ffffff;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}

/* 顶部 */
.doctor-int image {
  display: block;
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
}

.doctor-int {
  display: flex;
  align-items: center;
}

.do-name {
  font-size: 35rpx;
  font-weight: bold;
  padding-right: 10rpx;
}

.name-padd {
  padding-bottom: 20rpx;
}

.good-at {
  line-height: 1.5;
  padding-top: 20rpx;
}

/* 预约挂号 */
.res-Title {
  display: block;
  padding-bottom: 20rpx;
  font-size: 35rpx;
}

.table {
  display: flex;
}

.table-left text {
  display: block;
  height: 140rpx;
  line-height: 140rpx;
  border: 0.5rpx solid #dfdfdf;
}

.table-left {
  width: 100rpx;
  text-align: center;
}

.scroll-view_H {
  white-space: nowrap;
  overflow: scroll;
  width: 100%;
  display: flex;
  height: 440rpx;
}

.TR {
  display: inline-block;
  text-align: center;
  white-space: pre-wrap;
  height: fit-content;
}

.TR text {
  display: block;
}

.TR view {
  width: 130rpx;
  height: 140rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0.5rpx solid #dfdfdf;
}

.table-day {
  color: #8c8c8c;
}

/* 禁用点击 */
.Disa {
  pointer-events: none;
}

/* 有号 */
.Have {
  background-color: #0075ff !important;
  color: #ffffff !important;
}

/* 提示 */
.prompt text {
  display: block;
  padding: 10rpx 20rpx;
  font-size: 26rpx;
  color: #636468;
  line-height: 1.5;
}
</style>
